<%@page import="cn.kgcnews.service.impl.CommentServiceImpl"%>
<%@page import="java.util.regex.Pattern"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="cn.kgcnews.pojo.NewsDetail"%>
<%@page import="cn.kgcnews.service.impl.NewsServiceImpl"%>
<%@page import="cn.kgcnews.service.NewsService"%>
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<head>

<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>新闻浏览页面</title>

<!-- Bootstrap的样式文件-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico"
	mce_href="images/favicon.ico" type="image/x-icon">
<style>
.text-content {
	font-size: 16px;
	line-height: 30px;
}

.text-red {
	color: red;
}

.bbs  li {
	padding: 10px 0;
	border-bottom: 1px #999999 dashed;
	overflow: hidden;
}

.bbs  li div {
	float: left;
	width: 60px;
	margin-right: 10px;
}

.bbs  li div img {
	border-radius: 50%;
	width: 60px;
}

.bbs  li h1 {
	float: left;
	width: 520px;
	font-size: 16px;
	line-height: 35px;
}

.bbs  li p {
	color: #666666;
	line-height: 25px;
	font-size: 12px;
}
</style>

</head>
<body>
	<!--导航栏-->
	<%@ include file="header.jsp"%>

	<!--通栏广告-->
	<div class="container" style="margin-top: -15px">
		<img src="images/wy.jpg" width="100%"> <input type="hidden"
			value="${param.newsid}">
	</div>
	<div class="container" style="margin-top: 10px">
		<ul class="breadcrumb">
			<li><a href="#">国际</a>
			</li>
			<li class="active">新闻正文</li>
		</ul>
		<h1>${news.title}</h1>
		<hr>
		<h3>
			发布时间：${news.createDate} 作者：${news.author} <span
				class="glyphicon glyphicon-time pull-right">&nbsp;</span> <span
				class="glyphicon glyphicon-fire pull-right">&nbsp;</span> <span
				class="glyphicon glyphicon-eye-open pull-right">&nbsp;</span> <span
				class="glyphicon glyphicon-comment pull-right">&nbsp;</span> <span
				class="glyphicon glyphicon-grain pull-right">&nbsp;</span> <span
				class="glyphicon glyphicon-apple pull-right">&nbsp;</span>
		</h3>
		<hr>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-9">
				<div class="panel panel-default">
					<div class="panel-body text-content">
						<c:if test="${!empty news.picPath}">
							<p>
								<img src="upload/${news.picPath}">
							</p>
						</c:if>
						${news.content}
					</div>
				</div>
				<div class="panel panel-default">

					<%
						session.setAttribute("newsidd", session.getAttribute("news"));
					%>
					<h3>
						&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list">&nbsp;</span>网友评论<small
							class="pull-right"><span class="text-red">101</span>条评论|<span
							class="text-red">5759</span>人参与网友评论</small>
					</h3>
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="username" class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-10">
								<textarea id="cccc" class="form-control" name="context" rows="5"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" id="cc" class="btn btn-default">发布</button>
							</div>
						</div>
					</form>

				</div>
				<div class="panel panel-default">
					<ul class="bbs" id="topnews">
						<%--  <c:forEach items="${list}" var="li">
                    <li>
                        <div><img src="images/tou01.jpg"></div>
                        <h1>${li.context} </h1>
                        <p>${li.date }</p>
                    </li>
                   </c:forEach> --%>
						<script type="text/javascript">
						$(function(){
						//发布评论时的异步加载
						$("#cc").click(function(){
						var tt=document.getElementById("cccc").value;
						
						//alert(document.getElementById("cccc").value);
							$.post("CommentServlet",{"newsid":${news.id},"con":tt},
									function(result) {
										if (result == 1) {
												alert("评论发布成功");
												$("#cccc").val("");
												displaycommentlist();
												
										}  else {
												alert("评论发布失败");	
										}
									});
						});	
						//评论读取得异步加载				
						function displaycommentlist(){
						
						$("#topnews").html("");//将li标签设置为空
							$.getJSON("findNewsServlet",{"newsid2":${news.id}},function(newslist){				
							//var newslist=$.parseJSON(result);
							for(var i in newslist){							
							$("#topnews").append(" <li><div><img src=\"images/tou01.jpg\"></div><h1>"+newslist[i].context+" </h1><p>"+newslist[i].date+"</p></li>");
							} 
							//console.log(result);
							});
							};
							displaycommentlist();
							});
				</script>
					</ul>
				</div>
			</div>
			<div class="col-md-3">
				<div class="panel panel-default" style="margin-left: -15px">
					<h4 style="text-indent: 1em">推荐新闻</h4>
					<ul class="list-unstyled">
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
					</ul>
				</div>
				<div class="panel panel-default" style="margin-left: -15px">
					<img src="images/readad.jpg" width="100%" />
				</div>
				<div class="panel panel-default" style="margin-left: -15px">
					<h4 style="text-indent: 1em">阅读排行</h4>
					<ul class="list-unstyled">
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
						<li><a href="#">【新闻】</a>&nbsp;&nbsp;<a href="#">特朗普又向普京送了份大礼</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--友情链接和版权信息-->
	<%@ include file="footer.jsp"%>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-1.12.4.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap.min.js"></script>

</body>
</html>